<template>
  <el-dialog
    :visible="true"
    :show-close="false"
    modal
    :title="$t('cArroval.noTitle')"
    width="80%">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top">
    <el-form-item :label="$t('cArroval.refreshMessage')" prop="remark">
      <el-input type="textarea" v-model="ruleForm.remark" :placeholder="$t('m.please')"/>
    </el-form-item>
  </el-form>
  <div class="bottom">
    <el-button @click="handleClose">{{$t('btn.canel')}}</el-button>
    <el-button type="primary" @click="handleOk">{{$t('btn.ok')}}</el-button>
  </div>
</el-dialog>
</template>

<script>
import { $approval } from '@/api/approval'
import { Notify } from 'vant'

export default {
  props: {
    applyObj: {
      type: Object,
      default() {
        return {}
      }
    },
    isManager: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  components: {
    [Notify.Component.name]: Notify.Component
  },
  data() {
    return {
      ruleForm: {
        remark: ''
      },
      rules: {
        remark: [ { required: true, message: `${this.$t('cArroval.refreshMessage')}`, trigger: 'blur' } ]
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if(!valid) return false
        let remarkObj = {
          id: this.applyObj.id,
          flag: 0,
          objection: this.ruleForm.remark
        }
        const obj = { inputApplyCarReq: this.inputApplyCarReq(this.applyObj), vehicleApprovalReq: remarkObj }

        // 20000以上 或者 不是专车
        if(this.isManager || this.applyObj.transportType !== '专车运输') {
          $approval
              .applyOk(obj)
              .then(res => {
                if(res.status !== 200) return this.$msg.fail(res.message || res.msg || '审批失败')
                Notify({ type: 'success', message: res.msg || res.message || '拒绝成功' })
                setTimeout(() => {
                  this.$router.go(-1)
                }, 300)
              })
              .catch(err => this.$msg.fail(err.message || err.msg || '出错了'))
        }
        else {
          if (this.applyObj['estimated_Freight'] > 20000) {
            this.btnLoading = false
            return alert('单位账号只能审批20000以下的数据')
          }
          $approval
              .applyDown(obj)
              .then(res => {
                if(res.status !== 200) return this.$msg.fail(res.message || res.msg ||'出错了')
                Notify({ type: 'success', message: res.msg || res.message || '同意成功' })
                setTimeout(() => {
                  this.$router.go(-1)
                }, 300)
              })
              .catch(err => this.$msg.fail(err.message || err.msg ||'出错了'))
        }
      })
    },
    handleClose() {
      this.$emit('handleClose')
    },
    // 上传回后端数据验证
    inputApplyCarReq(applyObj) {
      return {
        aog: applyObj.aog,
        applicationUnit: applyObj.applicationUnit,
        startStation: applyObj.startStation,
        targetStation: applyObj.targetStation,
        deliveryUnit: applyObj.deliveryUnit,
        deliveryPeople: applyObj.deliveryPeople,
        deliveryPhone: applyObj.deliveryPhone,
        receiveUnit: applyObj.receiveUnit,
        receivePeople: applyObj.receivePeople,
        receivePhone: applyObj.receivePhone,
        spare_phone: applyObj.spare_phone,
        innerGoodsInfoEntityList: applyObj.innerGoodsInfoEntityList,
        id: applyObj.id,
        sparePhone: applyObj.sparePhone
      }
    }
  }
}
</script>

<style scoped>
/deep/.el-dialog__body {
  padding: 0 15px !important;
}
/deep/.el-dialog {
  border-radius: 5px;
  margin-top: 30vh !important;
}
.bottom {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  padding: 10px;
}
.el-button {
 flex: 1;
}
</style>
